<template>
	<div>
		<!-- 面包屑 -->
		<el-breadcrumb separator="/" style="margin-bottom: 20px;">
			<el-breadcrumb-item :to="{ path: '/main' }">首页</el-breadcrumb-item>
			<el-breadcrumb-item><a href="../main">帮买及废品回收</a></el-breadcrumb-item>
			<el-breadcrumb-item>驿站管理</el-breadcrumb-item>
		</el-breadcrumb>


		<!-- 搜索栏  模糊查询 -->
		<el-form :inline="true" :model="yizhanInfo" class="demo-form-inline">
			<el-form-item label="驿站名称:">
				<el-input clearable @clear="getYiZhanList()" v-model="yizhanInfo.courierStationName"
					placeholder="请输入驿站名称"></el-input>
			</el-form-item>
			<el-form-item label="小区名称:">
				<el-input clearable @clear="getYiZhanList()" v-model="yizhanInfo.communityName"
					placeholder="请输入小区名称"></el-input>
			</el-form-item>
			<el-form-item label="添加时间:">
				<el-date-picker value-format="yyyy-MM-dd HH:mm:ss" v-model="subDate" type="daterange"
					range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
				</el-date-picker>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="seach" style="background-color: khaki; border: none;">搜索</el-button>
			</el-form-item>
		</el-form>


		<!-- 新增门店 -->
		<el-button type="primary" style="margin-bottom: 20px; background-color: khaki; border: none;"
			@click="addYiZhan">添加驿站</el-button>


		<!-- 表格信息 -->
		<el-table :data="yizhanList" style="width: 100%" :header-cell-style="{backgroundColor: '#f8f8f8'}">
			<el-table-column prop="courierStationId" label="ID">
			</el-table-column>
			<el-table-column prop="courierStationName" label="驿站名字">
			</el-table-column>
			<el-table-column prop="courierStationAddress" label="驿站地址">
			</el-table-column>
			<el-table-column prop="courierStationCommunityName" label="所在小区">
			</el-table-column>
			<el-table-column prop="addTime" label="添加时间">
			</el-table-column>
			<el-table-column label="订单状态">
				<template slot-scope='scope'>
					<el-button disabled type="success" v-if="scope.row.courierStationStatus==1">已上架</el-button>
					<el-button disabled type="danger" v-if="scope.row.courierStationStatus==0">已下架</el-button>
				</template>
			</el-table-column>
			<el-table-column label="操作">
				<template slot-scope='scope'>
					<el-link :underline="false" type="primary" @click="editYiZhan(scope.row)">编辑驿站</el-link>&nbsp;&nbsp;
					<el-link :underline="false" type="warning" @click="changeYiZhanStatus(scope.row)"
						v-if="scope.row.courierStationStatus==1">立即下架</el-link>
					<el-link :underline="false" type="warning" @click="changeYiZhanStatus(scope.row)"
						v-if="scope.row.courierStationStatus==0">立即上架</el-link>
					<!-- 这个delete方法不是删除驿站，是修改驿站上下架状态。方法名没修改 -->
				</template>
			</el-table-column>
		</el-table>

		<!-- 页码 -->
		<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
			:current-page="yizhanInfo.pageNum" :page-sizes="[10, 20, 30, 40]" :page-size="yizhanInfo.pageSize"
			layout="total, sizes, prev, pager, next, jumper" :total="total">
		</el-pagination>

		<!-- 弹窗显示增加驿站 -->
		<el-dialog :title="title" :visible.sync="dialogFormVisible" @close="cancel">
			<el-form :model="yizhan">
				<el-form-item label="驿站名称" label-width="120px">
					<el-input v-model="yizhan.courierStationName" placeholder="请填写驿站名称"></el-input>
				</el-form-item>

				<!-- 级联时间选择 -->
				<el-form-item label="所属地区" label-width="120px">
					<el-cascader :options="citys" v-model="address" placeholder="请选择所属地址"></el-cascader>
				</el-form-item>

				<!-- 填写详细地址 -->
				<el-form-item label="" label-width="120px">
					<el-input v-model="yizhan.courierStationAddress" placeholder="请输入详细地址"></el-input>
				</el-form-item>

				<!-- 选择所属小区 -->
				<el-form-item label="所属小区" label-width="120px">
					<el-select filterable clearable placeholder="请选择" v-model="selectValue">
						<el-option :key="item.courierStationId" v-for="item in yizhanList1"
							:label="item.courierStationCommunityName+'('+item.courierStationProvince+item.courierStationCity+item.courierStationDistrict+item.courierStationAddress+')'" 
							:value="item.courierStationCommunityId">
						</el-option>
					</el-select>
				</el-form-item>

				<!-- 获取位置 -->
				<el-form-item label="驿站坐标" label-width="120px">
					<el-button type="primary" @click="getLocation">获取位置</el-button>
					<span v-show="courierStationLongitude">{{courierStationLongitude}},{{courierStationLatitude}}</span>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="cancel">取 消</el-button>
				<!-- <el-button @click="addYiZhan()"> 保存</el-button> -->
				<el-button type="primary" @click="save">保 存</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	//GET请求查询参数：在网络请求中，params通常用于GET请求的查询参数（query parameter），
	// 用于传递查询字符串。这些参数会被拼接在URL的末尾，以?key1=value1&key2=value2的形式发送给服务器。
	// 服务器会根据这些参数返回相应的结果。
	//GET请求：主要用于从服务器请求数据。它通常用于获取资源，如请求一个网页、图片或JSON数据等。
	//GET请求也可以带有查询参数，这些参数附加在URL后面，用于传递额外的信息给服务器。
	//POST请求：主要用于向服务器提交数据。当用户填写表单并提交时，表单数据通常通过POST请求发送到服务器
	//进行处理。POST请求还可以用于执行敏感操作，如修改、删除数据等，因为这些操作的数据不会暴露在URL中。
	import citys from '../assets/citydata.js'
	export default {
		data() {
			return {
				total1:1,
				
				yizhanList1:[],
				
				//所属小区
				yizhanInfo1: {
					pageNum: 1,
					pageSize: 99999,
					courierStationName: '',
					communityName: '',
					courierStationStatus: '',
					startTime: '',
					endTime: ''
				},
				
				

				//弹出框头
				title: '新增驿站',

				//所属小区下拉框
				selectValue:null,


				//定义一个数组接收选择的地区
				address: [],


				//全国地区
				citys: citys,

				//经纬度
				courierStationLatitude: "", // 小区纬度
				courierStationLongitude: "", // 小区经度

				//驿站所有信息
				yizhan: {
					courierStationAddress: "",
					courierStationCity: "",
					courierStationCommunityId: "",
					courierStationDistrict: "",
					courierStationImage: "",
					courierStationName: "",
					courierStationProvince: "",
				},

				//控制增加驿站弹窗
				dialogFormVisible: false,

				//接口中驿站信息
				yizhanInfo: {
					pageNum: 1,
					pageSize: 10,
					courierStationName: '',
					communityName: '',
					courierStationStatus: '',
					startTime: '',
					endTime: ''
				},
				subDate: '',
				total: 1,
				yizhanList: []
			}
		},


		//用于选择所属小区
		created() {
			this.getYiZhanList()

		},

		methods: {
			//所属小区
			getYiZhanList1() {
				this.$http.get('courierStation/querySearchCourierStationList', {
						params: this.yizhanInfo1
					})
					.then(res => {
						if (res.data.status == 200) {
							this.yizhanList1 = res.data.data.list
							this.total1 = res.data.data.total
						} else {
							this.$message.error('服务器接口错误!')
						}
					})
					.catch(error => {
						this.$message.error('服务器接口错误!')
					})
			},
			
			

			//修改驿站上下架状态
			changeYiZhanStatus(row) {

				if (row.courierStationStatus == 1) {
					row.courierStationStatus = 0

				} else if (row.courierStationStatus == 0) {
					row.courierStationStatus = 1

				}

				this.$http.post('courierStation/modifyCourierStation', {
						courierStationId: row.courierStationId,
						courierStationStatus: row.courierStationStatus
					})
					.then(res => {
						if (res.data.status == 200) {
							this.$message.success('操作成功!')
							this.getYiZhanList()
						} else {
							this.$message.error('下架失败!')
						}
					})

			},

			//编辑驿站
			editYiZhan(row) {
				this.dialogFormVisible = true
				this.title = '编辑驿站'
				this.yizhan = row
				this.address = [this.yizhan.courierStationProvince, this.yizhan.courierStationCity, this.yizhan
					.courierStationDistrict
				]
			},

			//取消添加
			cancel() {
				this.dialogFormVisible = false
				this.yizhan = {
					courierStationAddress: "",
					courierStationCity: "",
					courierStationCommunityId: "",
					courierStationDistrict: "",
					courierStationImage: "",
					courierStationName: "",
					courierStationProvince: "",
				}
				this.selectValue=''
				this.address = []
				this.courierStationLatitude = ''
				this.courierStationLongitude = ''
				this.getYiZhanList()
			},
			//确定添加
			save() {
				if (this.title == '新增驿站') {
					this.$http.post('courierStation/addCourierStation', this.yizhan)
						.then((res) => {
							this.$message.success('操作成功!')
							this.cancel()
						})
				} else {
					this.$http.post('courierStation/modifyCourierStation', this.yizhan)
						.then((res) => {
							this.$message.success('操作成功!')
							this.cancel()

						})
				}

			},

			//获取坐标
			getLocation() {
				this.$http.get('https://restapi.amap.com/v3/geocode/geo', {
						params: {
							key: '457886b5972a97e93fb9cdccebfd450f',
							address: this.yizhan.courierStationProvince + this.yizhan.courierStationCity + this.yizhan
								.courierStationDistrict + this.yizhan.courierStationAddress
						}
					})
					.then(res => {
						if (!this.yizhan.courierStationProvince) {
							this.$message.error('请输入省市区!')
							return false
						}
						let location = res.data.geocodes[0].location
						this.courierStationLatitude = location.split(',')[0]
						this.courierStationLongitude = location.split(',')[1]
					})
			},


			//增加驿站按钮
			addYiZhan() {
				this.dialogFormVisible = true
			},

			//获取接口中驿站对象集合制表
			getYiZhanList() {
				this.$http.get('courierStation/querySearchCourierStationList', {
						params: this.yizhanInfo
					})
					.then(res => {
						if (res.data.status == 200) {
							this.yizhanList = res.data.data.list
							this.total = res.data.data.total
						} else {
							this.$message.error('服务器接口错误!')
						}
					})
					.catch(error => {
						this.$message.error('服务器接口错误!')
					})
			},

			// 页数改变时调用的函数
			handleCurrentChange(num) {
				this.yizhanInfo.pageNum = num
				this.getYiZhanList()
			},

			//每页展示条数改变时的函数
			handleSizeChange(size) {
				this.yizhanInfo.pageSize = size
				this.yizhanInfo.pageNum = 1
				this.getYiZhanList()
			},

			// 根据门店名称模糊查询
			// !!!!!根据店铺名称查询有bug
			seach() {
				this.getYiZhanList()
			}
		},
		mounted() {
			this.getYiZhanList()
			this.getYiZhanList1()
		},

		// 根据时间模糊查询
		watch: {
			subDate() {
				if (this.subDate) {
					this.yizhanInfo.startTime = this.subDate[0]
					this.yizhanInfo.endTime = this.subDate[1]
				} else {
					this.yizhanInfo.startTime = ''
					this.yizhanInfo.endTime = ''
				}
			},

			address() {
				this.yizhan.courierStationProvince = this.address[0]
				this.yizhan.courierStationCity = this.address[1]
				this.yizhan.courierStationDistrict = this.address[2]
			}
		}
	}
</script>

<style>
	.sp {
		font-size: 15px;
		margin-left: 20px;
		color: black;
		margin-bottom: 30px;
		display: inline-block;
	}

	.sp:active {
		color: aqua;
	}
	
	.el-pagination {
		margin-left: 300px;
	}
</style>